<template>
	<view class="content">
		<view class="waterBox">
			<u-waterfall v-model="shopList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<shop v-for="(item,index) in leftList" :key="index" :shopimg="item.img" :shopname="item.name" :oldprice="item.toPrice" :newprice="item.price"  @click.native="go_shopdetail(item)"></shop>
				</template>
				<template v-slot:right="{rightList}">
					<shop v-for="(item,index) in rightList" :key="index" :shopimg="item.img" :shopname="item.name" :oldprice="item.toPrice" :newprice="item.price" @click.native="go_shopdetail(item)"></shop>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
	import shop from "../../components/shop.vue"
	
	export default {
		components:{
			shop
		},
		data() {
			return {
				timestamp:0,
				shopList:[{
					img:'../../static/logo.png',
					name:'云南蜜桔',
					price:'9.00',
					toPrice:'10.00',
					sales:'10',
					man:'20'
				},{
					img:'../../static/logo.png',
					name:'云南蜜桔',
					price:'9.00',
					toPrice:'10.00',
					sales:'10',
					man:'20'
				},{
					img:'../../static/logo.png',
					name:'云南蜜桔',
					price:'9.00',
					toPrice:'10.00',
					sales:'10',
					man:'20'
				},{
					img:'../../static/logo.png',
					name:'云南蜜桔',
					price:'9.00',
					toPrice:'10.00',
					sales:'10',
					man:'20'
				},{
					img:'../../static/logo.png',
					name:'云南蜜桔',
					price:'9.00',
					toPrice:'10.00',
					sales:'10',
					man:'20'
				},{
					img:'../../static/logo.png',
					name:'云南蜜桔',
					price:'9.00',
					toPrice:'10.00',
					sales:'10',
					man:'20'
				}],
				sales:0,
				price:0
			}
		},
		methods: {
			go_shopdetail(){
				uni.navigateTo({
					url:'../shop/shopDetail'
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{background-color: #F7F7F7;}
.content{
	width: 90%;
	margin: auto;
	.timeLimit{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 20rpx 0 40rpx 0;
		.timeLeft,.timeRight{
			width: 38%;
			height: 120rpx;
			font-size: 14px;
			line-height: 20px;
			color: #333333;
			padding: 16px;
			border-radius: 16rpx;
		}
		image{
			width:160rpx;
			height: 104rpx;
			margin-left: 54rpx;
			margin-top: 24rpx;
		}
		.contents{
			font-size: 12px;
			color: #999999;
		}
		.timeLeft{
			background: linear-gradient(180deg, #FFDFB5 0%, #FFFFFF 100%);
		}
		.timeRight{
			background: linear-gradient(180deg, #FF9C9C 0%, #FFFFFF 100%);
		}
	}
	.options{
		padding-bottom: 20rpx;
		.option{
			padding-right: 50rpx;
		}
	}
	
}
</style>
